<template>
  <div class="nav_bar">
    <div class="logo" @click="toHome">
        <img src="@/assets/logo.png" alt="">
    </div>
    <div>
        <p>
            请输入搜索内容
            <van-icon class="icon_search" name="search" />
        </p>
    </div>
    <div>
        <img :src="imgUrl" v-if="imgUrl" @click="toUserinfo" />
        <img src="@/assets/default.png" @click="$router.push('/login')" v-else />
        <p>下载App</p>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      imgUrl: ''
    }
  },
  created () {
    if (localStorage.getItem('token')) {
      this.getUserInfo()
    }
  },
  methods: {
    // 获取用户信息
    async getUserInfo () {
      const res = await this.$http.get('/user/' + localStorage.getItem('id'))
      // console.log(res)
      if (res.status !== 200) return this.$msg.fail('获取用户信息失败')
      this.imgUrl = res.data[0].user_img
    },
    toHome () {
      if (this.$route.path !== '/') {
        this.$router.push('/')
      }
    },
    toUserinfo () {
      if (this.$route.path !== '/userinfo') {
        this.$router.push('/userinfo')
      }
    }
  }
}
</script>

<style lang="less" scoped>
.nav_bar {
  height: 12.5vw;
  background-color: white;
  display: flex;
  .logo {
    width: 25vw;
    display: flex;
    align-items: center;
    img {
      width: 100%;
    }
  }
  div:nth-child(2) {
    flex: 1;
    display: flex;
    align-items: center;
    font-size: 3.333vw;
    width: 100%;
    p {
      background-color: #F4F4F4;
      color: #999;
      width: 80%;
      height: 6.389vw;
      line-height: 6.389vw;
      border-radius: 3.611vw;
      padding-left: 6.944vw;
      position: relative;
      .icon_search {
        position: absolute;
        top: 50%;
        left: 0;
        transform: translate(50%,-50%)
      }
    }
  }
  div:nth-child(3) {
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      width: 6.667vw;
      height: 6.667vw;
      border-radius: 50%;
    }
    p {
      padding: 0.833vw 2.778vw;
      margin: 0 2.222vw;
      background-color: #fb7299;
      color: white;
      border-radius: 0.833vw;
      font-size: 3.611vw;
    }
  }
}
</style>
